<template>
  <div id="box">
    <!-- 导航栏 -->
    <van-nav-bar placeholder title="喜欢" fixed>
      <template #left>
        <van-icon
          name="revoke"
          color="#fdc03a"
          size="25"
          @click="$router.go(-1)"/>
      </template>
    </van-nav-bar>
    <!-- 下拉刷新 -->
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh">
      
      <!-- 用户喜欢 -->

        <div class="likelist" v-for="(item,i) in userlist" :key="i" @click="$router.push(`/detail?id=${item.did}`)">
          <span class="likepic">
            <img :src="`http://39.108.211.154${item.dimg}`">
          </span>
          <span class="like_detail">
            <div class="like_title">《{{item.dtitle}}》</div>
            <div class="userdetail">
              <div style="font-size: 3vw;margin-bottom: 10px;">发布日期：{{item.ddate.slice(0, 10)}}</div>
              <div class="user">
                <span class="user_1">
                  <van-image width="7vw" height="7vw" round :src="`http://39.108.211.154${item.uimg}`"/>
                  <span>{{item.d_uname}}</span>
                </span>
                <span @click.stop="">
                  <img style="width:7vw; height:7vw;" src="/cs-img/xh-active.png" @click="detele(item.did)">
                </span>
              </div>
            </div>
          </span>
        </div>
    <!-- 没有内容的默认图片 -->
        <van-empty v-if="usernum.length == 0" image-size="250px" description="空空如也" />
    </van-pull-refresh>
  </div>
</template>

<script>

import { Toast } from 'vant';

export default {
  data() {
    return {
      isLoading: false,
      userlist: [],
      usernum: 0,
      userdetail: null,
      data: '',
    };
  },
  mounted() {
    // 根据vuex的user查询到的用户作品
    this.axios.get(`http://39.108.211.154:8080/me_detail_like?username=${this.$store.state.user}`).then((res) => {
      this.usernum = res.data
      let num = [];
      res.data.forEach(item => {num.push(item.like_did)});
      num.forEach((num, index) => {
        // 查询所有用户信息
        this.axios.get(`http://39.108.211.154:8080/like_uco_text?lid=${num}`).then(res => {
          // 查询文章详情
          this.axios.get(`http://39.108.211.154:8080/detail_text?did=${num}`).then(ress => {
            // 将用户信息表中的uimg属性拼接到文章详情表中
            ress.data[0].uimg = res.data[0].uimg
            // 依次添加到this.userlist
            this.userlist.push(ress.data[0])
          })
        })
      })
    });
    console.log('用户喜欢的作品:', this.userlist);
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.$router.go(0);
      }, 1000);
    },
    detele(i) {
      let url = `http://39.108.211.154:8080/unlike_detail`
      let params = `like_username=${this.$store.state.user}&like_did=${i}`
      this.axios.post(url, params).then(res => {
        // console.log(res);
        this.$router.go(0);
        Toast({
          message: '已取消喜欢',
          icon: 'like-o'
        })
      })
    },
  },
};
</script>

<style lang="scss" scoped>
#box {
  height: 100vh;
  background-color: rgb(249, 249, 249);
}
::v-deep.van-pull-refresh{
  min-height: calc(100vh - 46px);
  margin-top: 5px;
}
.likelist{
    background-color: #fff;
    margin-bottom: 10px;
    box-sizing: border-box;
    padding: 10px 12px;
    width: 100%;
    display: flex;
    .likepic{
      width: 42%;
      height: 26vw;
      border-radius: 2vw;
      overflow: hidden;
      img{
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .like_detail{
    width: 58%;
    padding-left: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .like_title{
      color: black;
      font-size: 4vw;
    }
    .userdetail{
      .user{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .user_1{
          width: 100%;
          display: flex;
          align-items: center;
          .van-image{
            display: block;
            margin-right: 10px;
          }
          span{
            line-height: 6vw;
            color: black;
            font-size: 3vw;
          }
        }
        img{
          display: block;
        }
      }
    }
  }
</style>